<template>
  <div class="login">
    <div class="content">
      <div class="input-box border-bottom">
        <input type="number" placeholder="手机号" v-model="phone" oninput="if(value.length>11)value=value.slice(0,11)"
               ref="phone" @keydown="$refs.phone.style.color = '#333';">
      </div>
      <div class="input-box border-bottom">
        <input type="number" placeholder="验证码" maxlength="4" v-model="code" ref="code"
               oninput="if(value.length>4)value=value.slice(0,4)">
        <span slot="right" style="height:1rem;width:2.8rem;">
          <img width="100%" height="100%" @click="verifyCode($refs.verifyCode)" ref="verifyCode">
        </span>
      </div>
      <div class="input-box">
        <input type="number" placeholder="短信验证码" v-model="noteCode" oninput="if(value.length>6)value=value.slice(0,6)"
               ref="noteCode">
        <p class="sendVerify">
          <span v-show="show" @click="sendCode()">发送验证码</span>
          <span v-show="!show" class="count">{{count}}s后重新发送</span>
        </p>
      </div>
    </div>
    <div class="agreement">
      温馨提示：未注册土特产账号的手机号，登录时将自动注册，且代表您已同意 <a>《用户服务协议》</a>
    </div>
    <div class="btn">
      <p @click="_login" v-show="_pass()">登录</p>
      <p style="background: #aaa;" v-show="!_pass()">登录</p>
    </div>

    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>
</template>

<script>
  import {sendCaptcha, login, verify, isIdentity, getSession, isLogin} from 'common/js/user'
  import Loading from 'components/loading/Loading'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        phone: '',//手机号
        code: '', //验证码
        noteCode: '',//短信验证码
        start: false, //是否开启验证码
        checkbox: true, //是否阅读协议
        session: '', //获取sessionid
        TIME_COUNT: '',
        show: true,
        count: '',
        timer: null,
      }
    },
    computed: {
      ...mapGetters([
        'loading'
      ]),
    },
    mounted() {
      document.title = '手机登录';
      //验证码初始化
      getSession().then(res => {
        if (res.status === 1) {
          this.session = res.data;
          this.$refs.verifyCode.src = baseURL + 'ttc.php/Public/verify/sid/' + res.data;
        }
      })
      //判断是否登录
      isLogin().then(res => {
        if (res.status === 1) {
          console.log(res)
          this._isIdentity();
        }
      })
    },
    methods: {
      //验证码更新
      verifyCode(item) {
        getSession().then(res => {
          if (res.status === 1) {
            this.session = res.data;
            item.src = baseURL + 'ttc.php/Public/verify/sid/' + res.data
            this.$refs.code.focus();
            this.code = ''
          }
        });
      },
      //发送验证码
      sendCode() {
        if (!(/^1[34578]\d{9}$/.test(this.phone))) {
          this.$dialog.toast({
            mes: '请输入有效的手机号码！',
            timeout: 1000,
          });
          this.$refs.phone.style.color = "#ef4f4f";
          this.$refs.phone.focus();
          return false;
        }
        verify({
          "phpsid": this.session,//session_id
          "code": this.code,//用户输入的文字验证码
        }).then(res => {
          if (res.status === 1) {
            this.$dialog.loading.open('发送中...');
            sendCaptcha({
              phone: this.phone
            }).then(res => {
              this.start = true;
              this.$dialog.loading.close();
              this.$dialog.toast({
                mes: '已发送',
                icon: 'success',
                timeout: 1500
              });
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 1 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000)
              }
            })
          } else if (res.status === -1) {
            this.$dialog.toast({
              mes: res.expand.info,
              timeout: 1000,
            });
            this.verifyCode(this.$refs.verifyCode)
          }
        })
      },
      //登录
      _login() {
        this.$store.dispatch('showLoading');
        login({
          "mobile": this.phone,//手机号
          "verify": this.code,//文字验证码
          "msm_verify": this.noteCode,//短信验证码
          "phpsid": this.session,//获取验证码返回的session_id，用于提交后检验验证码
        }).then(res => {
          if (res.status === 1) {
            localStorage.setItem('token', res.data);
            if (this.$route.params.id) {
              if (this.$route.params.id === 'auth') {
                this._isIdentity();
              } else {
                this.$router.push('/specialtyDetails/' + this.$route.params.id)
              }
            } else {
              this._isIdentity();
            }
          } else if (res.status === -1) {
            this.$store.dispatch('hideLoading');
            this.$dialog.toast({
              mes: res.expand.info,
              timeout: 1000,
            });
            switch (res.expand.type) {
              case 1:
                this.$refs.code.focus();
                break;
              case 2:
                this.$refs.phone.style.color = "#ef4f4f";
                this.$refs.phone.focus();
                break;
              case 3:
                this.$refs.noteCode.focus();
                break;
            }
          } else {
            this.$store.dispatch('hideLoading');
            this.$dialog.alert({mes: res.msg});
          }
        })
      },
      //是否实名认证
      _isIdentity() {
        isIdentity({
          "phpsid": localStorage.getItem('token'),
        }).then(res => {
          this.$store.dispatch('hideLoading');
          if (res.status === 1) {
            console.log(res)
            if (res.expand.has_goods === 0) {
              this.$router.push('/specialtyRelease')
            } else {
              this.$router.push('specialtyList/' + localStorage.getItem('token'))
            }
          } else if (res.status === -1) {
            if (this.$route.params.id) {
              this.$router.push('/auth/' + this.$route.params.id)
            } else {
              this.$router.push('/auth')
            }
          } else {
            this.$dialog.alert({mes: res.msg});
          }
        })
      },
      //验证是否能按登录
      _pass() {
        if (/^1[34578]\d{9}$/.test(this.phone) && this.checkbox && this.code.length > 3 && this.noteCode.length > 5) {
          return true;
        }
        return false;
      }
    },
    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title
    line-height: 1.48rem;
    background: $background-f;
    text-align: center;
    font-size: .52rem;
    color: $color-title;
    margin-bottom: .32rem;

  .content
    background: $background-f;
    .input-box
      margin: 0 .5rem;
      position: relative;
      .sendVerify
        position: absolute;
        top: 0;
        right: 0;
        width: 3.12rem;
        line-height: 1.3rem;
        text-align: center;
        font-size: .40rem;
        color: $color-text;
        .count
          color: $color-code;
      .sendVerify:before
        content: '';
        position: absolute;
        left: 0;
        top: .3rem;
        bottom: .3rem;
        background: $background-wire;
        width: 1px;
      img
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 3.84rem;
      input
        width: 100%;
        line-height: 1.3rem;
        font-size: .42rem;

  .btn
    font-size: .42rem;
    color: $color;
    padding: 0 .5rem .64rem .5rem;
    p
      width: 100%;
      background: $background-btn;
      font-size: .5rem;
      line-height: 1.4rem;
      text-align: center;
      border-radius: .1rem;
      color: $color;

  .btn:active p
    background: $color-background-btn;

  .agreement
    padding: .5rem;
    font-size: .35rem;
    line-height: .5rem;
    a
      color: $color-a;

</style>
